import "./index.scss";
import { useEffect, useState } from "react";
import { Avatar, Button, List, Skeleton } from "antd";
import { getNewFrendList } from "@renderer/api";

interface DataType {
  frendId: string;
  frendName: string;
  description: string;
  avatar: string;
}

const NewFrend = (): JSX.Element => {
  const [list, setList] = useState<DataType[]>([]);
  useEffect(() => {
    const result = getNewFrendList();
    setList(result);
  }, []);

  const actions = (frendId: string) => {
    if (frendId == "1" || frendId == "2") {
      return [<a key="list-loadmore-edit">同意</a>, <a key="list-loadmore-more">拒绝</a>];
    }
    return ["已同意"];
  };
  return (
    <div className="new-frend">
      <div className="frendName-bar">
        <div className="frendName">新的好友</div>
      </div>
      <List
        itemLayout="horizontal"
        dataSource={list}
        renderItem={({ frendId, frendName, description }) => (
          <List.Item actions={actions(frendId)}>
            <List.Item.Meta
              avatar={
                <Avatar size={32}>{frendName.charAt(0)}</Avatar>
                // <Avatar size={32} src={avatar} />
              }
              title={<a>{frendName}</a>}
              description={description}
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default NewFrend;
